<script setup lang="ts">
    import GoodsPanel from '@/components/GoodsPanel.vue' //引入自定义公用组件
    import product1 from "@/assets/images/product1.png"
    import product2 from "@/assets/images/product2.png"
    import product3 from "@/assets/images/product3.png"
    import product4 from "@/assets/images/product4.png"

    //人气推荐商品列表
    const goodsList = [
        {id:1, name:"直播", picture:product1},
        {id:2, name:"推荐", picture:product2},
        {id:3, name:"补贴", picture:product3},
        {id:4, name:"分享", picture:product4},
    ]
</script>

<template>
    <!--引入子组件-->
    <GoodsPanel title="人气推荐" sub-title="人气推荐 不容错过">
        <div class="goodsItem" v-for="item in goodsList">
            <div>
                <img :src="item.picture" />
            </div>
            <div>{{ item.name }}</div>
            <div>￥???</div>
        </div>
    </GoodsPanel>
</template>

<style scoped>
    .goodsItem{
        border-radius: 5px;
        width:270px;
        transition: all 0.3s ease;
        background-color:#F0F9F4;
        margin-right:20px;
    }
    .goodsItem:nth-child(1){
        margin-left:15px;
    }
    .goodsItem:hover{
        box-shadow: 0px 3px 5px 5px lightgray;
        transform: translateY(-5px);
    }
    .goodsItem > div{
        margin:0px auto 10px auto;
        width:270px;
        text-align:center;
    }
    .goodsItem > div:nth-child(2){
        font-size:20px;
    }
    .goodsItem > div:nth-child(3){
        font-size:20px;
        color:#CF4444;
    }
    .goodsItem img{
        width:270px;
        height:270px;
        border-radius: 5px;
    }
</style>
